<template>
  <div>
    <KUF2KFMapDialog ref="kUF2KFMapDialog"
                     :crtField="knowledgeUnitField"
                     @setMatchingFieldCallBack="setMatchingFieldCallBack" :insertSynonymDisplayFlag="false"/>
    <InputDialog ref="setDynamicFieldDialog"
                 :value="knowledgeUnitField.name"
                 label="字段名称"
                 title="设置动态字段名称" @callback="setDynamicFieldCallBack"/>
    <CustomTag2KFDialog ref="CustomTag2KFDialog" :crtField="knowledgeUnitField"
                        @setMatchingFieldCallBack="setMatchingFieldCallBack"/>
    <el-row style="line-height: 35px; ">
      <el-col>
        <el-button icon="el-icon-back"
                   size="small"
                   type="text"
                   @click="$router.go(-1)">返回</el-button>
        <span> | 字段名称: {{ knowledgeUnitField.name }} </span>
        <el-button size="small" type="primary" style="margin-left: 50px; " @click="multiSetMatchField">
          批量匹配字段</el-button>
      </el-col>
    </el-row>

    <el-table ref="sameKnowledgeUnitFieldTable"
              :data='sameKnowledgeList'
              :height="tableHeight"
              stripe border>
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column label="知识名称" prop="name" min-width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="素材拆分字段" min-width="300">
        <template slot-scope="scope">
          <div class="contentDiv"
               v-html="scope.row.knowledgeUnitFieldList.find(item => item.name === knowledgeUnitField.name).content"></div>
        </template>
      </el-table-column>
      <el-table-column label="已匹配字段" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="UTIL.isNotEmpty(getKnowledgeUnitField(scope.row).knowledgeLibFieldId)
          || UTIL.isNotEmpty(getKnowledgeUnitField(scope.row).knowledgeLibFieldIdDefault)" style="color: green">(固定)</span>
          <span v-else-if="UTIL.isNotEmpty(getKnowledgeUnitField(scope.row).knowledgeLibFieldName)
          || UTIL.isNotEmpty(getKnowledgeUnitField(scope.row).knowledgeLibFieldNameDefault)" style="color: red">(动态)</span>
          <span v-html="getKnowledgeUnitField(scope.row).knowledgeLibFieldName
          || getKnowledgeUnitField(scope.row).knowledgeLibFieldNameDefault"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200">
        <template slot-scope="scope">
          <span><el-link type="primary" @click.prevent="setMatchingField(scope.row)">匹配字段</el-link></span>
          <!-- 目前, 知识单元字段名称和知识名称完全匹配的可以解绑, 修改为动态字段 -->
          <span><el-link type="primary" @click.prevent="setDynamicField(scope.row)">设置动态字段</el-link></span>
          <!-- 舍弃, 已匹配字段, 不想要这部分内容 -->
          <span><el-link type="danger" @click.prevent="abandonField(scope.row)">舍弃</el-link></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import KUF2KFMapDialog from './KUF2KFMapDialog'
  import InputDialog from '../common/InputDialog'
  import CustomTag2KFDialog from "./CustomTag2KFDialog";
  export default {
    name: "SameKnowledgeUnitField",
    components: {KUF2KFMapDialog, InputDialog, CustomTag2KFDialog},
    data() {
      return {
        tableHeight: CONST.WORKSPACE_HEIGHT - 50,
        matchType: 'single',
        crtKnowledge: {},
      }
    },
    computed: {
      ...mapState(['knowledgeUnitField', 'knowledgeList', 'knowledgeLibFieldList']),
      sameKnowledgeList() {
        return this.knowledgeList
          .filter(item => item.knowledgeUnitFieldList.findIndex(innerItem => innerItem.name === this.knowledgeUnitField.name) !== -1)
      },
    },
    methods: {
      getKnowledgeUnitField(knowledge) {
        return knowledge.knowledgeUnitFieldList.find(item => item.name === this.knowledgeUnitField.name)
      },
      setKnowledgeLibFieldIdAndName(knowledge, id, name) {
        let knowledgeUnitField = this.getKnowledgeUnitField(knowledge);
        knowledgeUnitField.knowledgeLibFieldId = id
        knowledgeUnitField.knowledgeLibFieldName = name
        knowledgeUnitField.knowledgeLibFieldIdDefault = id
        knowledgeUnitField.knowledgeLibFieldNameDefault = name
      },
      multiSetMatchField() {
        if (this.$refs.sameKnowledgeUnitFieldTable.selection.length === 0) {
          this.$message.warning('请选择知识列表')
          return
        }
        this.setMatchingField()
        this.matchType = 'multi'
      },
      setMatchingField(knowledge) {
        // 考虑自由标签;
        this.matchType = 'single'
        this.crtKnowledge = knowledge
        if (this.knowledgeUnitField.name === CONST.KNOWLEDGE_UNIT_FIELD_CUSTOM_TAG_KEY) {
          if (this.knowledgeLibFieldList.filter(item => item.kind === CONST.FIELD_KIND_MULTI_VALUE_INPUT).length === 0) {
            this.$message.warning("没有多值类型字段, 不能匹配固定字段")
            return
          }
          else {
            this.$refs.CustomTag2KFDialog.visible = true
          }
        }
        else {
          this.$refs.kUF2KFMapDialog.visible = true
        }
      },
      setMatchingFieldCallBack(matchField) {
        let waitForUpdateKnowledgeList = []
        if (this.matchType === 'single') {
          waitForUpdateKnowledgeList.push(this.crtKnowledge)
        }
        else {
          waitForUpdateKnowledgeList = this.$refs.sameKnowledgeUnitFieldTable.selection
        }
        for (let knowledge of waitForUpdateKnowledgeList) {
          this.setKnowledgeLibFieldIdAndName(knowledge, matchField.id, matchField.name)
        }
        this.$store.commit('forceUpdate')
      },
      setDynamicField(knowledge) {
        this.crtKnowledge = knowledge
        this.$refs.setDynamicFieldDialog.visible = true
      },
      setDynamicFieldCallBack(name) {
        //查看名称是否与库字段名称重复;
        for (let knowledgeLibField of this.knowledgeLibFieldList) {
          if (knowledgeLibField.name === name) {
            this.$message.warning('已存在重名固定字段, 请重新设置动态字段名称')
            return
          }
        }
        // 如果原来是动态字段, 则删除动态字段;
        this.setKnowledgeLibFieldIdAndName(this.crtKnowledge, '', name)
        this.$store.commit('forceUpdate')
      },
      abandonField(knowledge) {
        this.$confirm('忽略本知识单元对应字段？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.setKnowledgeLibFieldIdAndName(knowledge, '', '')
        }, UTIL.emptyFun)
      },
    },
  }
</script>

<style scoped>
  /deep/ .contentDiv {
    max-height: 200px;
    overflow-y: auto;
    white-space: initial !important;
  }
</style>
